<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="Dashboard">
    <meta name="keyword" content="Dashboard, Bootstrap, Admin, Template, Theme, Responsive, Fluid, Retina">

    <title>相亲网站管理台</title>

    <!-- Bootstrap core CSS -->
    <link href="assets/css/bootstrap.css" rel="stylesheet">
    <!--external css-->
    <link href="assets/font-awesome/css/font-awesome.css" rel="stylesheet" />
        
    <!-- Custom styles for this template -->
    <link href="assets/css/style.css" rel="stylesheet">
    <link href="assets/css/style-responsive.css" rel="stylesheet">
	<script src="assets/js/const.js"></script>
	<script src="assets/js/axios.min.js"></script>
	<script src="assets/js/vue.js"></script>
    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
      <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>

  <body>

  <section id="container" >
      <!-- **********************************************************************************************************************************************************
      TOP BAR CONTENT & NOTIFICATIONS
      *********************************************************************************************************************************************************** -->
      <!--header start-->
      <header class="header black-bg">
              <div class="sidebar-toggle-box">
                  <div class="fa fa-bars tooltips" data-placement="right" data-original-title="Toggle Navigation"></div>
              </div>
            <!--logo start-->
            <a href="index.html" class="logo"><b>大学生交友网站管理台</b></a>
           
            <div class="top-menu">
            	<ul class="nav pull-right top-menu">
                    <li><a class="logout" href="login.html">Logout</a></li>
            	</ul>
            </div>
        </header>
      <!--header end-->
      
      <!-- **********************************************************************************************************************************************************
      MAIN SIDEBAR MENU
      *********************************************************************************************************************************************************** -->
      <!--sidebar start-->
      <aside>
          <div id="sidebar"  class="nav-collapse ">
              <!-- sidebar menu start-->
              <ul class="sidebar-menu" id="nav-accordion">
              
              	  <h2 class="centered">Admin</h5>
              	  	
                  <li class="sub-menu">
                      <a class="active" href="javascript:;" >
                          <i class="fa fa-th"></i>
                          <span>数据库数据</span>
                      </a>
                      <ul class="sub">
                          <li class="active"><a  href="index.html">用户数据表</a></li>
						  <li class="active"><a  href="index2.html">活动数据表</a></li>
                      </ul>
                  </li>

              </ul>
              <!-- sidebar menu end-->
          </div>
      </aside>
      <!--sidebar end-->
      
      <!-- **********************************************************************************************************************************************************
      MAIN CONTENT
      *********************************************************************************************************************************************************** -->
      <!--main content start-->
      <section id="main-content">
          <section class="wrapper">
          	<h3><i class="fa fa-angle-right"></i> 用户信息管理</h3>
				<div class="row">
                  
				<div class="row mt">
                  <div class="col-md-12">
                      <div class="content-panel">
                          <table class="table table-striped table-advance table-hover">
	                  	  	  <h4><i class="fa fa-angle-right"></i> 全部用户信息表</h4>
	                  	  	  <hr>
                              <thead>
                              <tr>
                                  <th>姓名</th>
                                  <th> 年龄</th>
                                  <th> 身高</th>
                                  <th> 城市</th>
                                  <th>学校</th>
								  <th>年级</th>
								  <th>兴趣</th>
								  <th>性格</th>
								  <th>外表得分</th>
								  <th>特长</th>
								  <th>爱情宣言</th>
								  <th><i class=" fa fa-edit"></i>操作</th>
                              </tr>
                              </thead>
							  
                              <tbody v-for="(item,index) in user">
                              <tr v-bind:id="item.id" >
                                  <td>{{item.name}}</td>
                                  <td>{{item.age}}</td>
                                  <td>{{item.height}}</td>
                                  <td>{{item.city}}</td>
								  <td>{{item.schoolName}}</td>
								  <td>{{item.grade}}</td>
								  <td>{{item.hobby}}</td>
								  <td>{{item.charac}}</td>
								  <td>{{item.appearance}}</td>
								  <td>{{item.speciality}}</td>
								  <td>{{item.say}}</td>
	
                                  <td>
                                      <button class="btn btn-primary btn-xs" v-on:click="updateP(item.id)"><i class="fa fa-pencil"></i></button>
                                      <button class="btn btn-danger btn-xs" v-on:click="deleteP(item.id)"><i class="fa fa-trash-o "></i></button>
                                  </td>
                              </tr>
                              
                              </tbody>
                          </table>
                      </div><!-- /content-panel -->
                  </div><!-- /col-md-12 -->
              </div><!-- /row -->

		</section><! --/wrapper -->
      </section><!-- /MAIN CONTENT -->

      <!--main content end-->
      <!--footer start-->
      <footer class="site-footer">
          <div class="text-center">
              用户管理界面
              <a href="basic_table.html#" class="go-top">
                  <i class="fa fa-angle-up"></i>
              </a>
          </div>
      </footer>
      <!--footer end-->
  </section>

    <!-- js placed at the end of the document so the pages load faster -->
    <script src="assets/js/jquery.js"></script>
    <script src="assets/js/bootstrap.min.js"></script>
    <script class="include" type="text/javascript" src="assets/js/jquery.dcjqaccordion.2.7.js"></script>
    <script src="assets/js/jquery.scrollTo.min.js"></script>
    <script src="assets/js/jquery.nicescroll.js" type="text/javascript"></script>


    <!--common script for all pages-->
    <script src="assets/js/common-scripts.js"></script>

    <!--script for this page-->
    
  <script>
	config = {
			"el" : ".table-advance",
			"data" : {
				"user" : []
			},
			"methods" :{
				"deleteP" : function(id){		
					var u = url + "/user/deleteUser?id=" + id ;
					axios.get(u)
					.then(function(response){
						if(response.data.state == 0) {
							var e = document.getElementById(id) ;
							e.parentNode.removeChild(e) ;
						}else{
							window.alert("删除失败！");
						}
					})
					.catch() ;
				},
				"updateP" : function(id){
					window.localStorage.setItem("updId", id) ;
					window.location.href = "blank.html" ;
				}
			},
			"mounted" : function(){
				if(window.sessionStorage.getItem("id") == null) 
					{
						window.alert("还没登录哦！");
						window.location.href = "login.html" ;
					}
					
				var u = url + "/user/SelectAll" ;
				axios.get(u)
				.then(function(response){
					console.log(response.data.data) ;
					this.vue.user = response.data.data ;
				})
				.catch();
			}
		}
		
	
    var vue = new Vue(config) ;
	
  </script>

  </body>
</html>
